// 弹性盒子对平方向对齐方式合法化
@function -zf-flex-justify($text-direction) {
  $-zf-flex-justify: (
    'left': if($text-direction == rtl, flex-end, flex-start),
    'right': if($text-direction == rtl, flex-start, flex-end),
    'center': center,
    'justify': space-between,
    'spaced': space-around,
  );

  @return $-zf-flex-justify;
}

// 弹性盒子垂直方向对齐方式
$-zf-flex-align: (
  'top': flex-start,
  'bottom': flex-end,
  'middle': center,
  'stretch': stretch,
);

// 弹性盒子方向
$-zf-flex-direction: (
  'row': row,
  'row-reverse': row-reverse,
  'column': column,
  'column-reverse': column-reverse,
);

/// 通过向元素添加 `display：flex` 来启用弹性盒子布局
@mixin flex {
  display: flex;
}

/// 水平或垂直对齐弹性盒子容器中的项
///
/// @param {Keyword} $x [null] - 水平对齐。可以是 'left`，`right`，`center`，`justify` 或 `spaced`。或者，将其设置为“null”（默认值）不设置水平对齐。
/// @param {Keyword} $y [null] - 垂直对齐。可以是 `top`，`bottom`，`middle` 或 `stretch`。或者，将其设置为“null”（默认值）不设置垂直对齐。
@mixin flex-align($x: null, $y: null) {
  @if $x {
    @if map-has-key($-zf-flex-justify, $x) {
      $x: map-get($-zf-flex-justify, $x);
    } @else {
      @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';
    }
  }

  @if $y {
    @if map-has-key($-zf-flex-align, $y) {
      $y: map-get($-zf-flex-align, $y);
    } @else {
      @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';
    }
  }

  justify-content: $x;
  align-items: $y;
}

/// 垂直对齐弹性盒子模型行中的单个列。将此混合应用于弹性盒子模型列
///
/// @param {Keyword} $y [null] - 垂直对齐。可以是 `top`，`bottom`，`middle` 或 `stretch`。或者，将其设置为“null”（默认值）不设置垂直对齐。
@mixin flex-align-self($y: null) {
  @if $y {
    @if map-has-key($-zf-flex-align, $y) {
      $y: map-get($-zf-flex-align, $y);
    } @else {
      @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';
    }
  }

  align-self: $y;
}

/// 设置弹性盒模型对象的子元素出现的順序，数字较低的项先首先出现在布局中
/// @param {Number} $order [0] - 顺序号
@mixin flex-order($order: 0) {
  order: $order;
}

/// 设置弹性盒子元素的方向
/// @param {Keyword} $direction [row] - 使用弹性盒元素的方向，可以是以下值：
///   - row （默认）: 灵活的项目将水平显示，正如一个行一样
///   - row-reverse: 与 row 相同，但是以相反的顺序
///   - column: 灵活的项目将垂直显示，正如一个列一样
///   - column-reverse: 与 column 相同，但是以相反的顺序
@mixin flex-direction($direction: row) {
  flex-direction: $direction;
}
